<template>
  <div :class="['menu_toggle', isActive ? 'me_active' : '']" @click="toggle">
    <span class="line_m" v-for="item in 3" bg-gradient-to-r from-primary to-theme></span>
  </div>
</template>
<script setup lang="ts">
import { ref } from "vue";

const emits = defineEmits(["update:modelValue"]);
// const props = defineProps({});
const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false,
  },
});
const isActive = ref(false);
watch(
  () => props.modelValue,
  (val) => {
    isActive.value = val;
  }
);
const toggle = () => {
  isActive.value = !isActive.value;
  emits("update:modelValue", isActive.value);
};
</script>
<style lang="scss" scoped>
$h: 13px;
.menu_toggle {
  position: relative;
  width: 28px;
  height: 28px;
  .line_m {
    position: absolute;
    width: 100%;
    height: 2px;
    left: 0;
    border-radius: 2px;
    transition: all 0.35s ease;
    background-image: linear-gradient(to right, red 0%, blue 100%);

    &:nth-child(1) {
      top: 4px;
    }
    &:nth-child(2) {
      top: 50%;
      transform: translateY(-50%);
    }
    &:nth-child(3) {
      bottom: 4px;
    }
  }
  &.me_active {
    .line_m {
      &:nth-child(1) {
        top: $h;
        transform: rotate(-45deg);
        transform-origin: center;
      }
      &:nth-child(2) {
        opacity: 0;
        visibility: hidden;
      }
      &:nth-child(3) {
        bottom: $h;
        transform: rotate(45deg);
      }
    }
  }
}
</style>
